{% extends 'app01/moban/bassic.html' %}

{% block title %}密 码 登 录{% endblock %}

{% block css %}
    <style>
        .top1 {
            padding: 20px 20px 20px 20px;
            width: 450px;
            margin: 20px auto 0;
            border: #bcd0c7 solid 1px;
            border-radius: 20px 20px 20px 20px;
            box-shadow: 4px 4px 15px 1px #adb5bd;
            overflow:hidden;
        }

        .text {
            font-weight: bold;
        }

        input::placeholder {
            font-size: 13px;
        }

        .error_span {
            color: #b92c28;
            position: absolute;
            font-size: 12px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="top1">
        <h3 class="text" style="text-align: center">密码登录</h3>
       <form id='regForm' method="POST" action="{% url "app01:login" %}"  novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == "code" %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="form-label text">{{ field.label }}</label>
                        <div class="clearfix">
                            <div class="col-md-7" style="padding-left: 0">
                                {{ field }}
                                <span class="error_span">{{ field.errors.0 }}</span>
                            </div>
                            <div class="col-md-5" style="padding-left:  28px">
                                <img src="{% url 'app01:image_code' %}"  alt="" id="imageCode">
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="form-label text">{{ field.label }}</label>
                        {{ field }}
                        <span class="error_span">{{ field.errors.0}}</span>
                    </div>
                {% endif %}
            {% endfor %}

            <span class="d-grid gap-2 col-6 mx-auto" style="padding-bottom:  20px;display: inline-block;float: left; ">
                    <button id='btnSubmit' type="submit"
                            style="height: 35px; width: 120px;line-height: 15px;margin: 20px auto 0;"
                            class="btn btn-primary btn-lg btn-block">登 录
                    </button>
            </span>
           <span class="col-6" style="padding-left:  40px; padding-top:  40px;font-size: 14px; color: #269abc;display: inline-block;float: right; text-decoration:underline;">
                                    <a href="{% url 'app01:log_sms' %}">短信验证码登录？</a>
                                </span>

            </form>

    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            $('#imageCode').click(function () {
                var Oldsrc = $(this).attr('src'); // 初始化默认src
                $(this).attr('src', Oldsrc+'?');
            })
        })
    </script>
{% endblock %}